
$mainColor:#ebce86;
$blackColor:#333;
$whiteColor:#999;

.ui-fixed{position: fixed;width: 100vw;height:100vh;z-index:1000;top:0;left:0;visibility: hidden;transition: visibility 0.2s;}
.ui-bg{height:100vh;background: rgba(0,0,0,0.5);opacity: 0;transition: opacity 0.3s linear; transform: translateZ(0);}
.pub-clear{clear: both;}
.ui-fixed.on{
  visibility: visible;
  .ui-bg{opacity: 1;}
  .ui-menu{right:0;}
  .ui-alert{bottom:15vmin;opacity: 1;}
  .ui-date{transform:translate3d(0,0,0);bottom:-1px;}
}


//标题栏
.ui-title{
  background: $mainColor;height:11vmin;color:#fff;position: absolute;width:100vw;z-index: 10;
  .ui-title-back{position: absolute;top:3vmin;left:1vmin;}
  .ui-title-back:after,.ui-title-back:before{content:"";border:solid 2.5vmin transparent;width:0;height:0;position: absolute;top:0;left:0; border-right-color:$blackColor; z-index: 1; }
  .ui-title-back:before{border-right-color:$mainColor;left:2px; z-index: 3;}
  .ui-title-text{text-align: center;color:$blackColor;font-size: 1.1rem;line-height: 12vmin;font-weight: bold;}
  .ui-title-btn-block{position: absolute;right:2vmin;top:0.8vw;}
  .ui-title-btn{display: inline-block;width:8vmin;height:8vmin;font-size:1.5rem;color:$blackColor;line-height: 8vmin;font-weight: bold;}
  .ui-title-btn2{display: inline-block;font-size:1rem;color:$blackColor;line-height: 10vw;}
}

//文字列表
.ui-textlist{
  padding: 2.5vw 3vw;font-size: 0.8rem;overflow: hidden;margin:2vw;background:rgba(51,51,51,0.65);color:$whiteColor;border-radius: 1vw;
  .ui-textlist-title{font-size:1rem; margin-bottom:0.5vmin;color:$mainColor2;text-overflow: ellipsis;height:7vw;overflow: hidden;line-height: 7vw;white-space:nowrap;}
  .ui-textlist-title2{margin-bottom: 1.5vw;overflow: hidden;color:#666;font-size: 0.9rem;}
 /* .ui-textlist-field{ overflow: hidden; }
  .ui-textlist-time{float:left;}
  .ui-textlist-num{float:right;}*/
}


//图文列表
/*.ui-pictextlist{
  padding: 3vmin;border-bottom: solid 1px #eee;font-size: 0.8rem;overflow: hidden;
  .ui-pictextlist-img{width:20vmin;height:20vmin;float:left;}
  .ui-pictextlist-right{width:70vw;float:right;}
  .ui-pictextlist-title{font-size:0.95rem; margin-bottom:0.5vmin;white-space: nowrap;text-overflow: ellipsis; overflow: hidden;}
  .ui-pictextlist-title2{text-overflow: ellipsis;height:7vmin;overflow: hidden;color:#999;line-height: 7vmin;white-space:nowrap;}
  .ui-pictextlist-field{ overflow: hidden;color:#999;}
  .ui-pictextlist-time{float:left;}
  .ui-pictextlist-num{float:right;}
}*/

.ui-pictextlist2{
  padding: 2vmin;font-size: 0.8rem;overflow: hidden;margin:2vmin;border-radius: 1vmin;background:rgba(51,51,51,0.65);color:$whiteColor;
  .ui-pictextlist-img{width:100%;height:30vmin; overflow: hidden;background-size:100% auto; background-position: left center; }
  .ui-pictextlist-title{font-size:0.95rem; overflow: hidden;white-space:nowrap; text-overflow:ellipsis;margin: 1.5vw 0 1vw 0;}
  .ui-pictextlist-title2{max-height: 10vw;margin-bottom: 1.5vw;overflow: hidden;color:#666;}
  /*.ui-pictextlist-field{ overflow: hidden;color:#999;}
  .ui-pictextlist-time{float:left;}
  .ui-pictextlist-num{float:right;}*/
}



//商品列表 两个一行
.ui-goods{
  overflow: hidden;
  .ui-goods-block{width:50vw;padding:2vmin;font-size: 0.8rem;display: inline-block;vertical-align: top;box-sizing: border-box;border:solid 0 #eee;border-width:0 1vmin 1vmin 0;float: left;overflow:hidden;}
  .ui-goods-img{width:45vmin;height:45vmin;margin:0 auto;}
  .ui-goods-title{font-size:0.95rem; margin-bottom:0.5vmin;white-space: nowrap;text-overflow: ellipsis; overflow: hidden;}
  .ui-goods-price{font-size:1.3rem; color:#ff4200;margin: 0.5vmin 0 0 0;}
  .ui-goods-tip{display: inline-block;border:solid 1px #999;color:#999;border-radius:1vmin;padding: 0 1vmin; vertical-align: top;font-size: 0.7rem;}
  .ui-goods-info{color:#999;}
  .ui-goods-block-line{
    width:100vw;float: none;
    .ui-goods-img{float:left;width:26vmin;height: 26vmin;}
    .ui-goods-right{float:left;width:65vw;margin-left: 3vw;}
    .ui-goods-tipblock{height:5vmin;}
    .ui-goods-title{height:7vmin;}
    .ui-goods-price{height:8vmin;}

  }
}


//可编辑列表
.ui-edit{
  overflow: hidden;padding:4vmin 3vmin 4vmin 3vmin ;font-size: 0.95rem;color:#333;border-bottom: 1px #eee solid;box-sizing: border-box;
  .ui-edit-title{float:left;width:35vmin; text-overflow: ellipsis;white-space: nowrap;line-height: 6vmin;overflow: hidden;}
  .ui-edit-content{float:right;color:#999;text-align: right;width:48vmin;text-overflow: ellipsis;white-space: nowrap;line-height: 6vmin; overflow: hidden;}
  .ui-edit-img{float:right;position: relative;width:6vmin;height:6vmin;margin-left:3vmin;top:0.5vmin;}
  .ui-edit-img:after,.ui-edit-img:before{content:"";border:solid 2.5vmin transparent;width:0;height:0;position: absolute;top:0;right:0; border-left-color:#e1e1e1; z-index: 1}
  .ui-edit-img:before{border-left-color:#fff;right:1px; z-index: 3}
}


//滑出菜单
.ui-menu{
  width: 60vw;position: absolute;background: #fff;height:100vh;right:-60vw;top:0;box-sizing: border-box;padding:3vmin 0;overflow: auto;transition: right 0.3s ease;
  .ui-menu-li{padding:3vmin 4vmin; border-bottom: solid 1px #eee; font-size: 0.95rem;}
}


//底部
.ui-bottom-icon{
  height:15vmin;background: #ff4200;text-align: center;overflow: hidden;position: fixed;left: 0;width: 100vw;bottom:0;z-index: 999;display: flex;justify-content: space-around;
  .ui-bottom-li{display: inline-block;width:25vw;}
  .ui-bottom-icon{width:6vmin;height:6vmin;text-align:center;display: inline-block;color:#fff;font-size:1.5rem;}
  .ui-bottom-text{color:#fff;font-size: 0.75rem;}
}

.ui-bottom{
  height:12vmin;background: $mainColor;text-align: center;overflow: hidden;position: fixed;left: 0;width: 100vw;bottom:0;z-index: 999;display: flex;justify-content: space-around;
  .ui-bottom-li{display: inline-block;width:25vw;}
  .ui-bottom-text{color:$blackColor;font-size:1rem;line-height: 12vmin;}
}


//banner
.ui-banner{
  height:30vh;overflow:auto;position: relative;
  .ui-banner-list{overflow: hidden;height:30vh;}
  .ui-banner-img{width:100vw;height:100%;background:top center;background-size:auto 100%;display: inline-block;float: left;}
  .ui-banner-focus{position: absolute;bottom:2vmin;left:0;text-align: center;width:100%;z-index: 1;}
  .ui-banner-point{width:3vmin;height: 3vmin;background: #fff;border-radius:50%;display: inline-block;margin: 0 1vmin;}
  .ui-banner-point.on{background: #ff4200;}
}


//日历
.ui-date{
  position:absolute;height:80vmin;background:#fff;bottom:0;transform:translate3d(0,80vmin,0);left:0;width:100vw;font-size: 1.2rem;overflow: hidden;z-index:1;box-shadow: 0 -1vw 3vw 0 rgba(0,0,0,0.5);transition: transform 0.3s ease;
  .ui-date-head{text-align: center;color:#333;position: relative;height:11vmin;line-height: 11vmin;border-bottom:1px solid #eee;font-size: 1rem;font-weight: bold;}
  .ui-date-btn{position: absolute;right:3vmin;height:12vmin;top:0;color:#ff4200;}
  .ui-date-li{display: inline-block;width:30%;float:left;text-align: center;color:#666;height:60vmin;margin-top: 5vmin;position: relative;margin-left: 1.5%;}
  .ui-date-block{height:100%;overflow:auto;padding: 20vmin 0 30vmin 0;box-sizing: border-box;position: relative;z-index: 2}
  .ui-date-li:after{position: absolute;content:"";width:100%;height:10vmin;border:2px solid #ddd;border-left:none;border-right:none;top:20vmin;left:0;box-sizing: border-box;z-index: 1;}
  .ui-date-item{display: block;height:10vmin;boder-bottom:1px #eee solid;line-height: 10vmin;}
}


/*提示框*/
.ui-alert{
  position: absolute;width:80vw;padding-top:4vmin;background: #fff;border-radius:3vmin;left:10vw;bottom:0;box-sizing: border-box;transition: all 0.2s linear;opacity: 0;
  .ui-alert-title{font-size: 1.2rem;text-align: center;}
  .ui-alert-content{padding:3vmin 5vmin 5vmin 5vmin;min-height: 20vmin;}
  .ui-alert-bottom{border-top:1px #ddd solid;height:12vmin; overflow: hidden;}
  .ui-alert-btn{width: 50%;text-align:center;line-height: 12vmin;display: inline-block;height: 12vmin;float: left;box-sizing: border-box;}
  .ui-alert-btn:first-child{border-right: solid 1px #eee;font-size:4px;}
}

.book-cover{
  width:25vw;height:36vw; background: #273b54;position: relative;border-radius: 1vw; display: inline-block;word-break:break-all;white-space: normal;
  .book-cover-title{position: absolute;left:2vw; top:2vw; padding:1.5vw 0;border-radius:0.5vw;background: #939daa;width:5vw;font-size:0.75rem; text-align: center;line-height: 1.1;max-height: 90%; word-wrap: break-word;box-sizing: border-box; color: #222}
  .book-cover-hr{position: absolute;right:0; top:0;border-left:0.5vw solid #526276;width:8px;height: 100%;padding-top: 30%;box-sizing: border-box;}
  .book-cover-hr:after,.book-cover-hr:before{height:30%;content: "";border-top: 0.5vw solid #526276;display: block;}
  .book-cover-hr:after{border-bottom: 0.5vw solid #526276;}
}

.ui-classify{
  border-bottom: solid 1px rgba(51,51,51,0.7);background:rgba(51,51,51,0.6);
  .ui-classify-a{display: inline-block;padding:2.5vw 0;color:#fff;text-decoration: none;color:#999; margin-left: 3vw;}
  .ui-classify-a.on{color:$mainColor;}
}

.pub-empty{
  margin:6vw 0 10vw 0;text-align: center;color:#666;
  .icon{font-size: 1.5rem !important; margin-right: 1vw;vertical-align: middle;}
}